
<script setup lang="ts">
import { type Ref, ref, onMounted } from 'vue';
/* 菜单展示控制 */
let showLink:Ref<boolean> = ref(false)

function changeShow() {
    showLink.value = !showLink.value
}

/* 菜单数组 */
let menuArr:Array<string> = ['sqm', 'zxy', 'yj', 'gr', 'fqm', 'xsh', 'zc']


/** 控制顶部颜色 */
let titleTop:Ref<boolean> = ref(true)
onMounted(() => {
    window.addEventListener("scroll", () => {
        if(window.scrollY < 10){
            titleTop.value = true
        } else {
            titleTop.value = false
        }
        console.log('titleTop', titleTop.value)
    });
})

</script>

<template>
    <!-- 仅要求存在可以跳转到其他人的页面的顶部栏，具体样式自行实现 -->
    <div class="nav fixed top-0 w-full z-10">
        <div class="flex justify-between items-center w-full py-6 px-8 duration-300 text-white" :class="titleTop ? 'grey-bar' : 'bg-transparent'">
            <div class="">hello world</div>
            <div class="flex flex-col justify-between items-center h-8 z-10" @click="changeShow">
                <div class="h-1 w-16 bg-white duration-300" :class="showLink ? '-rotate-12 translate-y-3' : ''"></div>
                <div class="h-1 w-16 bg-white duration-300" :class="showLink ? 'hidden' : ''"></div>
                <div class="h-1 w-16 bg-white duration-300" :class="showLink ? 'rotate-12 -translate-y-4' : ''"></div>
            </div>
            <div class="nav-btn" :class="showLink ? 'nav-btn-active' : ''">
                <div class="nav-btn-bg" :class="showLink ? 'nav-btn-bg-active' : ''"></div>
                <div v-if="showLink" class="link">
                    <RouterLink :style="{ '--time': index / 20 + 's' }" v-for="(item, index) in menuArr" :key="item" :to="'\/' + item" class="link-item">{{ item.toUpperCase() }}</RouterLink>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.grey-bar{
    background-color: #27272aee;
}

.nav-btn{
    position: fixed;
    top: 0;
    right: 0;
    transition: all 0.8s ease-in-out;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
.nav-btn-active{
    width: 50%;
    height: 100vh;
}
.nav-btn-bg{
    position: absolute;
    top: -150vh;
    right: -100vw;
    height: 0;
    width: 0;
    border-radius: 50% 0% 50% 50%;
    background-color: #1B3140;
    transition: all 1s linear;

}
.nav-btn-bg-active{
    height: 300vh;
    width: 200vw;
}

.link{
    position: absolute;
    top: 0;
    padding: 20vh 10vw 30vh 10vw;
    height: 100vh;
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 2rem;
    color: #fff;
}

.link-item{
    padding: 2px 3rem;
    margin: 0.5rem;
    display: inline-block;
    left: 0rem;
    position: relative;
    transition: all 0.2s linear;
    animation: item 1s linear var(--time);
    animation-fill-mode: forwards;
    transform: translateX(100vw)
}
@keyframes item {
    0%{
        transform: translateX(100vw);
    }
    100%{
        transform: translateX(0)
    }
}
.link-item:hover{
    left: -1rem;
    box-shadow: 0 0 2px 1px #fff;
}
</style>
